<template>
	<view>
		<!-- 搜索 -->
		<view class="seach">
			<view class=" bg-white d-flex j-center a-center ">
				<view class="bg-light-secondary span-18 rounded-50 d-flex py-1" @click="pro_seach">
					<u-icon name="search" color="#888888" size="33" class="ml-3 mr-2"></u-icon>
					<input type="text" placeholder="搜索商品名称关键词"  disabled="true" />
				</view>
			</view>
			<!-- 头部 -->
			<view class="bg-white promotion_header" >
				<u-tabs-swiper ref="uTabs" active-color="#ff0000" bar-width="80" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
							swiperWidth="750"></u-tabs-swiper>
			</view>
		</view>
		<swiper :style="{'height':scrollHeight}"  :current="swiperCurrent"  @transition="transition" @animationfinish="animationfinish">
			<!-- 进行中 -->
		    <swiper-item>
		       <scroll-view scroll-y="true"  :style="{height: scrollHeight}">
		       	<view class="d-flex flex-column j-center a-center h_100" v-if="!underway_list.length">
		       		<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
		       		<view class="">暂无商品</view>
		       	</view>	
		       	<view class="" v-else>
		       		<view class="m-2 p-3 rounded-20 bg-white d-flex" v-for="(item,index) in underway_list" :key="index" @click="pro_detail(item)">
		       			<view class="promotion">
		       				<image :src="item.img.url" class="promotion_img rounded-20"></image>
		       			</view>
		       			<view class="ml-3 mr-1">
		       				<view class="font-weight-500 ellipsis  pro_name">{{item.goods_name}}</view>
		       				<view class="my pt-2 white-space  font-md"><text class="text-muted">促销时间:</text><text class="ml font-weight-500" >{{item.formatted_promote_start_date.substr(0,10).replace(/-/g,'.')}}-{{item.formatted_promote_end_date.substr(0,10).replace(/-/g,'.')}}</text></view>
		       				<view class=" mt-1 pt font-md"><text class="text-muted">促销价格:</text><text class="font-35 text-danger ml-1 font-weight-500">{{item.formatted_promote_price}}</text></view>
		       			</view>	
		       		</view>
		       	</view>
		       </scroll-view>
		    </swiper-item>
			<!-- 未开始 -->
		    <swiper-item>
		       <scroll-view scroll-y="true"  :style="{height: scrollHeight}">
		       	<view class="d-flex flex-column j-center a-center h_100 pb-3" v-if="!coming_list.length">
		       		<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
		       		<view class="">暂无商品</view>
		       	</view>	
		       	<view class="">
		       		<view class="m-2 p-3 rounded-20 bg-white d-flex" v-for="(item,index) in coming_list" :key="index" @click="pro_detail(item)">
		       			<view class="promotion">
		       				<image :src="item.img.url" mode="widthFix" class="promotion_img rounded-20"></image>
		       			</view>
		       			<view class="ml-3 mr-1">
		       				<view class="text-muted ellipsis  pro_name">{{item.goods_name}}</view>
		       				<view class="my pt-2 white-space text-muted font-md"><text >促销时间:</text><text class="ml">{{item.formatted_promote_start_date.substr(0,10).replace(/-/g,'.')}}-{{item.formatted_promote_end_date.substr(0,10).replace(/-/g,'.')}}</text></view>
		       				<view class="text-muted mt-1 pt font-md">促销价格:<text class="font-35 text-danger ml-1">{{item.formatted_promote_price}}</text></view>
		       			</view>
		       		</view>
		       	</view>
		       </scroll-view>
		    </swiper-item>
			
			<!-- 已结束 -->
		    <swiper-item>
		        <scroll-view scroll-y="true" :style="{height: scrollHeight}">
		        	<view class="d-flex flex-column j-center a-center h_100 pb-3" v-if="!finished_list.length">
		        		<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
		        		<view class="">暂无商品</view>
		        	</view>
		        	<view class="" v-else>
		        		<view  class="m-2 p-3 rounded-20 bg-white d-flex" v-for="(item,index) in finished_list" :key="index" @click="pro_detail(item)">
		        			<view class="promotion">
		        				<image :src="item.img.url" mode="widthFix" class="promotion_img rounded-20"></image>
		        			</view>
		        			<view class="ml-3 mr-1">
		        				<view class="text-muted ellipsis  pro_name">{{item.goods_name}}</view>
		        				<view class="my pt-2 white-space text-muted font-md"><text >促销时间:</text><text class="ml">{{item.formatted_promote_start_date.substr(0,10).replace(/-/g,'.')}}-{{item.formatted_promote_end_date.substr(0,10).replace(/-/g,'.')}}</text></view>
		        				<view class="text-muted mt-1 pt font-md">促销价格:<text class="font-35 text-danger ml-1">{{item.formatted_promote_price}}</text></view>
		        			</view>		
		        		</view>
		        	</view>	
		        </scroll-view>
		    </swiper-item>           
		 </swiper>	
		 <view class="footer">
		 	
		 </view>
		<view class="bg-white py-2 w-100 position-fixed bottom-0 btn">
			<button type="warn" @click="add_pro">添加</button>
		</view>
		
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			return {
				list:[{id:1,name:"进行中"},{id:2,name:"未开始"},{id:3,name:"已结束"}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				scrollHeight:0, // 屏幕高度
				underway_list:"",
				coming_list:"",
				finished_list:"",
				more:1, // 第几页
				count:10, // 条数,
				u_loadmore:true, // 加载中
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 上拉加载数据
			getData(){
				if(this.swiperCurrent==0){
					this.$H.post("admin/promotion/list",{
						status:"going",
						pagination:{
							count:this.count,
							page:this.more
						},
					}).then(res=>{
						console.log(res)
						this.underway_list=res.data
					})
				}else if(this.swiperCurrent==1){
					this.$H.post("admin/promotion/list",{
						status:"coming",
						pagination:{
							count:this.count,
							page:this.more
						},
					}).then(res=>{
						console.log(res)
						this.coming_list=res.data
					})
				}else if(this.swiperCurrent==2){
					this.$H.post("admin/promotion/list",{
						status:"finished",
						pagination:{
							count:this.count,
							page:this.more
						},
					}).then(res=>{
						console.log(res)
						this.finished_list=res.data
					})
				}
				
			},
			// 搜索页面
			pro_seach(){
				uni.navigateTo({
					url:"/pagesA/promotion/promotion-seach?edit="+'详情'
				})
			},
			// 添加促销商品 
			add_pro(){
				uni.navigateTo({
					url:"/pagesA/promotion/promotion-seach?add="+'添加'
				})
			},
			// 促销商品详情
			pro_detail(item){
				console.log(item)
				uni.navigateTo({
					url:"/pagesA/promotion/promotion-edit?goods_id="+item.goods_id
				})
			},
			
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					query.select('.footer').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].top - res[1].bottom+ 'px';
					})
				}
			})
		},
		onLoad() {
			uni.showLoading({
				title:"加载中",
				success: () => {
					this.$H.post("admin/promotion/list",{
						status:"going",
						pagination:{
							count:this.count,
							page:this.more
						},
					}).then(res=>{
						console.log(res)
						this.u_loadmore=false 
						this.underway_list=res.data
						uni.hideLoading()
					})	
				}
			})
		},
		onShow() {
			this.$H.post("admin/promotion/list",{
				status:"going",
				pagination:{
					count:this.count,
					page:this.more
				},
			}).then(res=>{
				console.log(res)
				this.underway_list=res.data
			})
			
			this.$H.post("admin/promotion/list",{
				status:"coming",
				pagination:{
					count:this.count,
					page:this.more
				},
			}).then(res=>{
				console.log(res)
				this.coming_list=res.data
			})
			
			this.$H.post("admin/promotion/list",{
				status:"finished",
				pagination:{
					count:this.count,
					page:this.more
				},
			}).then(res=>{
				this.finished_list=res.data
			})
		},
		// 上拉加载函数.
		onReachBottom(){
		    let that = this
		    // 每次上拉加载的数据比上一次多十个
		    that.count += SIZE
		    setTimeout(()=>{
		        that.getData()
		    },1000)
		}
	}
</script>

<style>
	
	
</style>
